<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>显示隐藏效果</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        img{
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div>
	<button id="btn" onclick="cik()">隐藏图片</button>
	<br />
	<img src="./267ed-29fe324b-0e8b-4598-bb5b-07180cbc6797.gif">
    </div>
	<script type="text/javascript">
		//先获取按钮
		var btn = document.getElementById("btn");
		//再获取图片 是数组
		var img = document.getElementsByTagName("img")[0];
		//点击事件的方法
		function cik(){
			//如果按钮文字等于显示就执行里面的内容，如果不是显示就执行else里面的内容
			if(btn.innerHTML==='隐藏图片'){
				//图片设为不可见
				img.style.display='none';
				//同时按钮文字改为显示
				btn.innerHTML="显示图片";
			}else{
				//另一种情况    图片显示
				img.style.display='block';
				//文字按钮改为隐藏
				btn.innerHTML="隐藏图片";
			}
		}
	</script>
</body>
</html>
